<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '优读教师',
	},
}
</route>

<template>
	<view class="page-ranking">
		<fly-navbar backgroundColor="transparent" leftText="优读教师" fixed />
		<image
			class="w-full h-full absolute top-0 left-0 z-1"
			:src="baseImg + '/ranking-bg.jpg'"
		></image>
		<scroll-view
			scroll-y
			class="w-full h-full absolute top-0 left-0 z-2 box-border"
			:style="{ paddingTop: barAlbright + 'rpx' }"
		>
			<view class="w-full py-4">
				<view class="w-full h-[280rpx] px-4 box-border">
					<view class="w-full h-full relative">
						<image
							class="w-full h-full absolute top-0 left-0 z-1"
							:src="baseImg + '/ranking-user.png'"
						></image>
						<view
							class="w-full h-full flex flex-col justify-between rounded-[30rpx] pt-[32rpx] pb-[35rpx] box-border absolute top-0 left-0 z-2"
						>
							<view
								class="w-full flex justify-between items-start pl-[30rpx] pr-[35rpx] box-border"
							>
								<view class="flex justify-between items-center" v-if="userInfo.school_id">
									<image
										class="w-[100rpx] h-[100rpx] rounded-[50%] mr-2 border-2 border-solid border-[#fff]"
										:src="userInfo.avatar || baseImg + '/user-default.png'"
									></image>
									<view class="flex flex-col py-2 box-border">
										<text class="text-[#fff] text-[35rpx]">{{ userInfo.user_name }}</text>
										<text class="text-[#fff] text-[24rpx] mt-1">{{ userInfo.school_name }}</text>
									</view>
								</view>
								<view class="flex items-center" @tap="ruleModal(true)">
									<text class="text-[#6EC1FC] text-[21rpx]">积分规则</text>
									<view
										class="ml-1 rounded-[50%] h-[24rpx] text-[18rpx] w-[24rpx] flex justify-center items-center text-[#fff] ranking-rule"
										>?</view
									>
								</view>
							</view>
							<view
								v-if="userInfo.school_id"
								class="w-full flex justify-between items-center pl-[35rpx] pr-[45rpx] box-border"
							>
								<view
									class="h-[63rpx] px-4 rounded-[30rpx] text-[#FAC22C] text-[25rpx] flex justify-center items-center ranking-point"
								>
									<image class="w-[27rpx] h-[27rpx]" :src="baseImg + '/ranking-point.png'"></image>
									<text class="ml-1">{{ showInfo.integral }}</text>
								</view>
								<view class="text-[#fff] text-[50rpx] font-bold" v-if="showInfo.no === '未上榜'">
									未上榜
								</view>
								<view class="text-[#fff] text-[50rpx] font-bold" v-else>
									No.
									<text class="text-[117rpx]" style="line-height: 0">{{ showInfo.no }}</text>
								</view>
							</view>
							<view v-if="!userInfo.school_id" class="w-full flex justify-center items-center">
								<view
									class="px-6 py-2 rounded-[30rpx] text-[#fff] text-[29rpx]"
									style="background: #fac22c"
									@tap="toLogin"
								>
									加入学校
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="w-full px-4 mt-2 box-border" v-if="thisPage !== -1">
					<view class="w-full bg-white rounded-[30rpx] py-4 box-border">
						<block v-if="thisPage === 1">
							<view
								class="w-full flex justify-between items-center px-[34rpx] box-border mb-[16rpx]"
								v-if="showInfo.year && showInfo.month"
							>
								<text class="text-[#F8745C] text-[28rpx]"
									>{{ showInfo.year }}年{{ showInfo.month }}月榜单</text
								>
								<text class="text-[#ABABAB] text-[20rpx]"
									>榜单每月更新，以下积分为本月所获积分</text
								>
							</view>

							<block v-if="showInfo.list.length">
								<view
									class="w-full flex justify-between items-center mb-2 ranking-item"
									v-for="(item, index) in showInfo.list"
									:key="item.id"
								>
									<view
										class="text-[#303030] text-[28rpx] w-[102rpx] flex justify-center items-center px-2 font-bold"
									>
										<image
											v-if="item.top <= 3 && index <= 2"
											class="w-[43rpx] h-[62rpx]"
											:src="topImg[index]"
										></image>
										<text v-else>{{ item.top }}</text>
									</view>
									<view class="flex-1 flex justify-between items-center pr-4 box-border">
										<view class="flex justify-between items-center">
											<image
												class="ranking-img"
												:src="item.avatar || baseImg + '/my-student.png'"
											></image>
											<view
												class="py-2 flex flex-col justify-between ml-3 text-[#303030] text-[28rpx]"
												style="width: 240rpx; overflow: hidden"
											>
												<text
													style="
														width: 100%;
														float: left;
														display: block;
														overflow: hidden;
														height: 40rpx;
														line-height: 40rpx;
														text-overflow: ellipsis;
														letter-spacing: 0;
														white-space: nowrap;
													"
													>{{ item.username }}</text
												>
												<text
													class="text-[24rpx] text-[#ABABAB]"
													style="
														width: 100%;
														float: left;
														display: block;
														overflow: hidden;
														height: 40rpx;
														line-height: 40rpx;
														text-overflow: ellipsis;
														letter-spacing: 0;
														white-space: nowrap;
													"
													>{{ item.school_name }}</text
												>
											</view>
										</view>
										<view class="flex items-center text-[#ABABAB] text-[21rpx]"
											>领读积分<text
												class="text-[#303030] text-[35rpx] ml-2 font-bold"
												:style="{ color: '#F9BE20' }"
												>{{ item.integral }}</text
											></view
										>
									</view>
								</view>
							</block>

							<no-page v-else title="暂无数据" height="100%" type="msg"></no-page>
						</block>
						<no-page
							v-if="thisPage === 0"
							:title="title"
							height="100%"
							:type="thisPage === 0 ? 'btn' : 'msg'"
							@retry="retry"
						></no-page>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="popup" :mask-click="false" background-color="none">
			<view class="w-full px-4 box-border">
				<view class="w-full rounded-[54rpx] rule-modal relative px-6 py-6 box-border">
					<view class="w-full relative">
						<view
							@tap="ruleModal(false)"
							class="text-[#C6C6C6] text-[34rpx] w-[44rpx] h-[44rpx] flex justify-center items-center rounded-[50%] absolute right-0 top-0"
							style="background: #fbf9f9"
							>x</view
						>
						<view class="text-center text-[#303030] text-[34rpx] font-bold">阅读积分规则说明</view>
						<view class="w-full mt-6 bg-white rounded-[30rpx] px-6 py-6 box-border rule-box">
							<view class="w-full mb-6">
								<view class="w-full px-6 box-border">
									<view
										class="w-full flex justify-center items-center rounded-[33rpx] h-[65rpx] text-[#fff] text-[33rpx]"
										style="background: #2ba5e0"
									>
										<image
											class="w-[30rpx] h-[30rpx] mr-1"
											:src="baseImg + '/rule-point.png'"
										></image>
										限单次获取
									</view>
								</view>
								<view class="w-full">
									<view class="text-[35rpx] text-[#303030] mt-2">注册登陆</view>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>注册成功<text class="text-[#F9BE20] ml-2">+3</text></view
									>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>首次加入/创建班级<text class="text-[#F9BE20] ml-2">+3</text></view
									>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>累计使用“倍阅读”7天<text class="text-[#F9BE20] ml-2">+5</text></view
									>
									<view class="text-[35rpx] text-[#303030] mt-2">阅读</view>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>每一名学生完成单本书阅读<text class="text-[#F9BE20] ml-2">+1</text></view
									>
								</view>
							</view>
							<view class="w-full">
								<view class="w-full px-6 box-border">
									<view
										class="w-full flex justify-center items-center rounded-[33rpx] h-[65rpx] text-[#fff] text-[33rpx]"
										style="background: #2ba5e0"
									>
										<image
											class="w-[30rpx] h-[30rpx] mr-1"
											:src="baseImg + '/rule-point.png'"
										></image>
										可重复获取
									</view>
								</view>
								<view class="w-full">
									<view class="text-[35rpx] text-[#303030] mt-2">共读计划</view>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>创建一个班级共读计划<text class="text-[#F9BE20] ml-2">+2</text></view
									>
									<view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>每有一名学生完成班级共读计划<text class="text-[#F9BE20] ml-2">+2</text></view
									><view class="flex items-center text-[29rpx] text-[#5e5e5e]"
										>每有一名学生完成倍阅共读计划<text class="text-[#F9BE20] ml-2">+2</text></view
									>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import { systemInfo } from '@/utils/getSystemInfo';
import useChangeTabbar from '@/hooks/useChangeTabbar';
import { toAuthPage } from '@/utils/jump';
import { getRankingPerson, Ranking } from '@/service/ranking';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const popup = ref(null);
const showInfo = ref<Ranking.SchoolData>({
	list: [],
	integral: 0,
	no: '未上榜',
	month: 0,
	year: 0,
});

const thisPage = ref(-1);
const title = ref('');

const topImg = [
	`${baseImg.value}/ranking-one.png`,
	`${baseImg.value}/ranking-two.png`,
	`${baseImg.value}/ranking-three.png`,
];

useChangeTabbar(2);

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	if (userInfo.value.school_id) {
		getRanking();
	}
});

const toLogin = () => {
	// 跳转登录是否 验证授权
	toAuthPage();
};

const getRanking = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getRankingPerson();
		uni.hideLoading();
		if (res.status_code === 200) {
			thisPage.value = 1;
			showInfo.value = { ...showInfo.value, ...res.data };
		} else {
			uni.showToast({
				icon: 'none',
				message: res.message,
			});
			thisPage.value = 0;
			showInfo.value = { list: [], integral: 0, no: '未上榜', month: 0, year: 0 };
			title.value = res.message;
		}
	} catch (error) {
		showInfo.value = { list: [], integral: 0, no: '未上榜', month: 0, year: 0 };
		thisPage.value = 0;
		uni.hideLoading();
		uni.showToast({
			icon: 'none',
			message: '查询失败',
		});
		title.value = '查询失败';
	}
};

const ruleModal = flag => {
	if (flag) {
		popup.value.open();
	} else {
		popup.value.close();
	}
};

const retry = () => {
	getRanking();
};
</script>

<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.page-ranking {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;

	.ranking-img {
		width: 75rpx;
		height: 75rpx;
		background: #dbdbdb;
		border: 1rpx solid #f3f1f3;
		border-radius: 50%;
	}

	.ranking-item:last-child {
		margin-bottom: 0;
	}

	.ranking-rule {
		background: #62baf9;
	}

	.ranking-point {
		background: #f3f3f5;
	}

	.rule-modal {
		background: linear-gradient(0deg, #fff, #aac6f8);
	}

	.rule-box {
		max-height: 700rpx;
		overflow-y: auto;
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 0rpx 14rpx 0rpx rgb(0 0 0 / 7%);
	}
}
</style>
